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Requirement traceability supports several activities of software development 
processes such as impact analysis, requirement changes, maintenance, 
verification, and validation of a software system. For its effective use in 
those activities, the graphical representation of traceability data plays an 
important role. However, several traceability tools lack an excellent visual 
representation to present these type of data. Therefore, this paper presents a 
visual framework which has been designed and proposed as a prototype tool 
that can visualize traceability data. The framework applies data visualization 
techniques to represent requirements and its artefacts relationships as colour- 
coded symbols on a node-link diagram; users can traverse the graph with an 
impact analysis method to understand data and make decisions. The 
evaluation result shows that the proposed tool is useful and easy enough in 
terms of improving user interaction and to better understand requirement 


Visual framework traceability data. 


This is an open access article under the CC BY-SA license. 


Corresponding Author: 


Wan Mohd Nazmee Wan Zainon 

School of Computer Sciences, Universiti Sains Malaysia (USM) 
11800, USM, Penang, Malaysia 

Email: nazmee@usm.my 


1. INTRODUCTION 

Requirement traceability is the process of identifying and following the life of requirements in 
forwards or backwards direction created during a software development lifecycle [1]. Visualization is an 
important technique used to represent traceability relationships between requirements and artefacts to support 
various software development activities such as impact analysis, requirement changes, validation of the 
system, maintenance, and software evolution [2]. During software development, a large number of complex 
traceability relationships are generated [3]. Several traceability tools lack excellent visual representation to 
trace relationships between requirements and artefacts [4]. Therefore, there is a need to have a graphical 
visual tool that can help to visualize and represent traceability relationships between requirements and 
artefacts [5]. With the help of visualization techniques and graphical notations, the user can easily visualize 
tracing the relationships between requirements and artefacts [6]-[8]. 

In this paper, we proposed a visual framework in order to visualize the traceability relationships 
between requirements and its artefacts during the software development process or requirement change. We 
adopt the graphical user interface design for visual information-seeking mantra, “overview first, zoom and 
filter, then details-on-demand”, as proposed by Schneiderman [9]. The tool uses graphical notations to 
represent the traceability of requirements and artefacts relationships bi-directionally. Users can traverse the 
graph for impact analysis and reduce visual clutter to understand their data quickly and make data 
visualization has been recognized as a significant research field focused on the application of visualization 
techniques to help people understand and analyze traceability data [10]. Visualization techniques, design 
principles, human perception, and colour theory are applied in data presentation [9]. Traceability techniques 
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such as graphs, matrix, and hyperlinks are used to show complex data [11]. A graph-based visualization is the 
most common visualization technique used by traceability systems [12], [13]. It supports the visualization of 
an overview of traceability links between multiple requirements and artefacts as nodes, with relationships as 
edges. Li and Maalej [7] recently examined and compared graphs, matrix, lists, and hyperlinks techniques in 
an empirical study to show which of these visualization techniques are more suitable to be conducted in any 
given context. The study highlights the traceability graph as the best to support management tasks. Several 
visualization tools were developed to visualize the traceability relationships between requirements and 
artefacts as a node-link diagram representation on a network graph [14]-[17]. 

Rubasinghe et al. [5] proposed a traceability support visualization tool for heterogeneous artefacts in 
DevOps environments. The tool eliminates and updates conflicts raised among artefacts, while the developed 
artefacts in the project are outdated. They proposed traceability process model consists of artefact change 
detection, change impact analysis, and change propagation. Moreover, this tool provides multi-user 
accessibility and is integrated with a prominent DevOps tool stack to enable collaborations. Whenever the 
number of artefacts increased, the graph complexity of viewing the relationships also increased. However, 
with the predefined overcrowded relationships in the graph view, the graph complexity was reduced to 
provide an effective analysis vision. In contrast, visualization of the links may provide the release of each 
software product. Figure 1 shows an example of an interactive traceability graph, where nodes denote the 
artefact and edges show the links. 


Figure 1. An example of the change propagated for interactive traceability graph [5] 


Similarly, another study by Beier and Muller [3] presents a prototype visualization tool for 
traceability artefacts called "Ariadne's eye". It is an interactive method of scaling, zooming, and folding in 
(node-link) of a vertical tree and balloon tree layouts. The tool is visualized to compare three geometrical 
forms, namely circle, eclipse, and polygon, that help users understand and select a type of hierarchical 
framework to link all elements and their direct ancestral line easily. The systematic visualization layout for 
complex graphs consists of numerous hierarchical artefacts. The spatially separates the hierarchical artefacts 
and traces the relationships to make it readable and understandable to the users on the graph, as shown in 
Figure 2. The study is limited and valid with two issues; the moderately low number of participants and the 
number of elements within an artefact far away from the industrial artefacts. They further refined and 
advanced the layout according to user feedback. They implemented their final ideas as an interactive 
visualization tool called Ariadne's eye. The result analysis method is displayed where the mean values per 
task and layout are given. 
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Figure 2. Ariadne’s eye visualization tool [3] 


2. PROPOSED METHOD 

This research study developed a visual framework design to help users visualize requirement 
traceability data. The visual framework follows the design of advanced graphical user interface (GUT) guide 
for visual information seeking mantra, “overview first, zoom and filter, then details on-demand”, which was 
proposed by Schneiderman in 1996. The regular use of the mantra is an indication that shows the excellent 
design and helps many practitioners in different design scenarios [18]. In Figure 3, the overview of the 
proposed visual framework is presented. 
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Figure 3. The proposed visual framework 
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In Figure 3, it can be observed that the visual framework provides data input, visualization 
approaches, and implementation of the prototype tool called VizTraceArtefacts. The use of visualization 
techniques helps to display the overview of traceability data and enables the user to modify the detailed 
information displayed. The selected visual cluster can be filtered to reduce the number of visual clutters for 
requirements and artefacts relationships on the network graph. 

Moreover, the tool enables the analysis of understanding traceability data in a different view. Figure 4 
shows some typical shapes and colours used to represent demographic appearances of requirements, artefacts, 
relationships, and directions. The colour-coded shapes represent requirements and artefacts using cycles, while 
the colour-coded arrows represent relationships and directions, all depending on the type of colour used. 
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Figure 4. Example of the types of color-coded symbols used 


The implemented prototype tool was made through the application of an adopted novel 
methodological guide for visual information seeking mantra [18]. The methodology is presented and 
categorized into three (3) phases that include preliminary study and analysis, designing the framework and its 
implementation, and evaluation. The selection of visualization techniques to implement the tool follows the 
design of advanced GUI guide for visual information seeking mantra, “overview first, zoom and filter, then 
details on-demand”, as proposed by Schneiderman in 1996. The frequent use of the mantra is evidence in 
which many practitioners find it helpful in different design scenarios [18], [19]. 

The first technique applied is called an “overview first”; it is a perspective method of an 
understanding dataset with a complete diagram structure familiar with data designs [20]. This technique 
represents the overview of data as a node-link diagram to improve user understandability and communication 
[21]. “Node-link diagram” is a type of visualization on a graph that shows relationships and represents their 
connections as nodes and edges to identify the type of relationships that exist between a group of entities 
[22]. Figure 5 shows an overview of our traceability visualization from VizTraceArtefacts. The nodes 
represent requirements and artefacts; the links represent relationships and show directions of forward and 
backward. All the links are coloured based on the type in order to identify them on the network. 
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Figure 5. Overview of node-link visualization showing requirements and artefacts relationships 


The second technique applied is “zoom and filter” which is suitable and meant for an overview as 
node-link representation on the network. “Both the techniques help to reduce visual clutter from view and 
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represent data easily on the network” [18]. The “zoom” technique is a process of fine-tuning to adjust 
components of data position and size on the screen, while “filter” is considered as alteration and navigation to 
represent an essential viewpoint on the diagram [23]. “Zooming and filtering” allow users to filter nodes 
based on their needs because many visualized components are limited, therefore the perceptual clarity of 
users needs an improvement. Figure 6 shows the VizTraceArtefacts zoom and filter traceability visualization. 


- is lead to creation of - is implemented by 


C) >is satisfied by 
«modifies G) 


Figure 6. Zoom and filter visualization showing relationships between a requirement and artefacts 


The last technique applied is “details-on-demand” to offer more information without altering the 
design view. Therefore, the “ordered-lists” method is used to enable a user to find outliers on the network. 
Accordingly, “ranking” is a general approach to organize or disorganize a set of items by calculating the rank 
of an individual item according to the value of one to many of its attributes [24]. This approach enables a 
user to combine the attribute ranking and partition, ordered-lists and colour-coding to measure the scale of 
nodes and edges on the network. Furthermore, it also assists in the evaluation of nodes performance that has 
relation with one another and prioritizes them according to the ranking. Table | shows the ordered list for 
comparing rankings. 


Table 1. Ordered list for comparing rankings 


Rank Node (artefacts) Relationship type 
4.00 Requirements (REQ) Is tested by 

3.00 Use case (UC) Depends on 

3.00 Source code (SC) Is verified on 

2.00 Test case (TC) Influenced 

2.00 Is implemented by 
1.00 Lead to creation of 
1.00 Is modified by 
1.00 Is satisfied by 


We used colour-coded circles for each type of node to support usability aspects in the establishment 
of traceability artefacts and relationships. We considered the requirement-use case, use case-source code, 
source code-test case requirement-test case, and use case-test case artefacts. However, the design was altered 
to directly reflect in artefacts; consequently, the nodes represent requirements and artefacts while the edges 
show the traceability relationships and directions. As shown in Figure 5, the nodes in blue represent 
requirements, the green nodes represent use cases, the red nodes represent source codes, and the light blue 
nodes represent test cases. The colour arrows represent links that show the relationships with directions 
between requirements and artefacts. ForceAtlas2 layout algorithm is used to position whole nodes on the 
network. It is a “spring analogue method of drawing graphs to position nodes and links that are iteratively 
refined and present them until the whole energy of the system is minimized” [25]. Therefore, “node-link 
diagrams significantly leave an empty background space and come across scalability issues when applied to 
larger graphs” [22]. The ranking method used to measure the number of connected nodes is the “degree” 
between requirements and artefacts. Each node is ranked based on the method of an ordered list, and a 
partition is allocated to a range of colour groups. The users can traverse the graph for impact analysis to 
further understand the data and make decisions. 


Bulletin of Electr Eng & Inf, Vol. 11, No. 1, February 2022: 426-434 


Bulletin of Electr Eng & Inf ISSN: 2302-9285 Oo 431 


3. EVALUATION 

In this study, a case study was selected to evaluate the proposed tool because of its usefulness in 
terms of examining how “scientific theories and models work in the real world”. Hence, it is an appropriate 
way to conduct an evaluation and procedure to evaluate the effectiveness of the visual framework and the 
proposed tool. Subject and relevance are the first substances and groundwork of the case study by means of 
using a small set of participants that produce candid and convincing stories from real users that interact with 
the visualization tool without demanding more time [23]. Therefore, a total of thirty-five (35) respondents 
participated in this case study with profiles like the target users. The data collection was performed at the 
School of Computer Sciences, Universiti Sains Malaysia in Pulau Pinang, Malaysia (Main Campus). 

The perceived usefulness is “a point that person trusts as using a certain system is skillful of an 
existence that is very useful.” Thus, a positively perceived usefulness tool is a lively performance that a user 
believes of its existence. On the other hand, the perceived ease of use is “a point that person trusts as using a 
certain system will highly reduce effort”. Therefore, the ease of use tool will be accepted by users and more 
likely to be acknowledged. 

The usefulness and ease of use are the most significant user bases that measure the usability features of 
a traceability tool and general concepts of usability. All the users were required to answer both usefulness and 
ease of use questions in this case study according to their views and observations made on VizTraceArtefacts. 
The questions on usefulness and ease of use are based on research on the self-efficiency theory, research on the 
cost-benefit paradigm from behavioural decision theory, and research on adopting innovations [25]. 

The evaluation was carried out to determine the usability of the prototype tool (usefulness) and (ease 
of use) to improve user interaction and understanding on requirement traceability. Therefore, the 
questionnaire is categorized into three sections; in the first section (1), it consists of demographic questions to 
gather respondents’ information. The second section (2) consists of assessment questions provided for 
respondents to answer according to their understanding by using VizTraceArtefacts. The third section (3) 
also consists of some questions to evaluate the proposed visual framework according to the two (2) selected 
variables, i.e., perceived usefulness and perceived ease of use. All the respondents who interacted with 
VizTraceArtefacts used the same type of questionnaire. 

Finally, an open-ended evaluation approach adapted from [26] was used to evaluate the 
effectiveness of the visualization techniques applied for this proposed tool. Therefore, the participants were 
given a questionnaire and room space to fill up and elaborate on the usefulness and effectiveness of the 
visualization techniques and statistical analysis method applied to the visual framework. Statistical and 
network analysis techniques were used to evaluate the accuracy of the overall traceability graph that consists 
of 42 nodes and 66 edges. Degree and eigenvector centrality measures were applied to identify the most 
influential and important artefacts on the graph. 

Figure 7 shows the eigenvector centrality of the traceability links over all artefact nodes that states 
the average node importance in the traceability graph based on the average traceability connection of each 
node. The average change is calculated as 0.0091 using Gephi. There are more noninfluential nodes, as a 
maximum of 42 nodes have a score of 0 eigenvector centrality. Two nodes with the highest eigenvalue 
centrality of the value 1 show the most influential nodes. According to the result, the relative eigenvector 
centrality (EVC) measures with high values are likely to be a high importance artefact. This confirms the 
accuracy of traceability links between the most influential artefacts and indicates the least influential artefacts 
with very low centrality values. 


Eigenvector Centrality Distribution 
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Figure 7. Eigenvector centrality distribution in overall traceability 
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4. RESULTS AND DISCUSSION 

The findings of this study show that the proposed tool is found to be very useful and easy in terms of 
visualizing requirement traceability data by all respondents. The study findings on usefulness of this 
framework show that it is effective in helping users to improve their understanding and make decisions. 
Whenever the complexity of artefacts relationships increases, visualization gives users an impression to 
visualize, trace and filter artefacts to discover information easily. The result is not statistically significant as 
the case study has a small number of participants. Therefore, there is only a minor difference between 
participants in terms of speed and time taken to complete the assessment. 

According to the bar chart, all recorded items have the highest number of mean scores that is 
between "4 to 5". All the respondents have assured that the proposed tool make their job easier and they 
clearly understand traceability data better. The use of zoom and filter techniques help display the necessary 
information and reduced visual clutter that increased the effectiveness of the tool (mean of 4.76). Some 
respondents acknowledged the tool as it reduces searching effort and clicks features, which makes work very 
useful and more comfortable (mean of 4.16) for simplifying their work. As a result of increasing job 
performance (mean of 4.37) and reduction of time taken to complete a task, this enables them to perform 
their job easier (mean of 4.0). Moreover, the increase in productivity items is slight as an opinion made by a 
single respondent (mean of 4.3) due to task complexity and confusion at the time to join more than one 
visualization technique. Figure 8(a) shows the score mean of usefulness and Figure 8(b) shows the score for 
ease of use between all metrics. 

The result of ease of use shows that the proposed tool is easy and turns out to be skillful, clear, and 
understandable as all respondents answered all the questions appropriately. In the recorded items, clear and 
understandable (mean of 4.8), skillful (mean of 4.6), remember (mean of 4.0), easy to learn, and easy to use 
(mean of 4.3) achieved the highest score mean for ease of use factors. On the other hand, controllable 
achieved the lowest mean score of (3.5) as a small number of respondents confirmed that they faced 
problems in navigating to each visualization technique to help them perform their tasks. Thus, in the case of a 
first-time user, it is impossible to learn something new quickly in a short time. Due to this issue, a manual 
with some guidelines from the researcher was provided to simplify respondents’ learning process. Moreover, 
an open-ended evaluation result shows a perfect meaningful answer from the respondents’ understanding 
after using the proposed tool which inspired this discussion towards the use of an open-ended question. The 
respondents were all satisfied with how each visualization technique applied to the visual framework helps 
them improve their understanding and complete the assessment tasks. 
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Figure 8. The mean score of (a) usefulness and (b) ease of use 
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5. CONCLUSION 

In this paper, we proposed a visual framework and a visualization tool called VizTraceArtefacts that 
supports the visualization of software requirement traceability data. The tool applies data visualization 
techniques to represent requirements traceability data as colour-coded symbols on a node-link diagram. The 
main contribution of this framework is that it can help users to improve their understanding and interaction, 
develop products rapidly, increase software quality, reduce maintenance effort, and manage requirement 
change frequently during the software development lifecycle. The evaluation result obtained from usability 
measures in the considered case study shows that the visual framework is significant enough in terms of 
improving user interaction and understanding. The tool can be further enhanced with a filtering search 
mechanism technique due to the efficiency benefits to search for requirements using keywords and limit the 
search filter to only specific relationships, directions, link number, and properties. 
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